// 业务数据统计柱状图
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Column } from '@ant-design/charts';
import type { StatisticsData } from '@/services/homePage/homePage';
import { getIndexStatistics } from '@/services/homePage/homePage';
import { Card } from 'antd';
import moment from 'moment';
import classnames from 'classnames';

interface ChartObj {
  year: string;
  name: string;
  count: number;
}

const DataHistogramChart: React.FC = () => {
  const [policyCountData, setPolicyCountData] = useState<ChartObj[]>([]);
  const [workVolumeData, setWorkVolumeData] = useState<ChartObj[]>([]);
  const [awardedCountData, setAwardedCountData] = useState<ChartObj[]>([]);
  const [rewardAmountData, setRewardAmountData] = useState<ChartObj[]>([]);
  useEffect(() => {
    getIndexStatistics().then((resp) => {
      if (resp.results) {
        let policyArr: ChartObj[] = [];
        let workVolumeArr: ChartObj[] = [];
        let awardedCountArr: ChartObj[] = [];
        let rewardAmountArr: ChartObj[] = [];
        resp.results?.forEach((item: StatisticsData) => {
          const policyChartArr = [
            { year: item.year, name: '政策事项', count: item.policyMatterCount },
          ];
          policyArr = policyArr.concat(policyChartArr);
          setPolicyCountData(policyArr);
          const workChartArr = [{ year: item.year, name: '办件量', count: item.workVolume }];
          workVolumeArr = workVolumeArr.concat(workChartArr);
          setWorkVolumeData(workVolumeArr);
          const awardedCountChartArr = [
            { year: item.year, name: '奖励企业数', count: item.awardedEnterprisesCount },
          ];
          awardedCountArr = awardedCountArr.concat(awardedCountChartArr);
          setAwardedCountData(awardedCountArr);
          const rewardAmountChartArr = [
            {
              year: item.year,
              name: '奖励金额（万元）',
              count: item.rewardAmount,
            },
          ];
          rewardAmountArr = rewardAmountArr.concat(rewardAmountChartArr);
          setRewardAmountData(rewardAmountArr);
        });
      }
    });
  }, []);

  const commonCfg = {
    padding: [30, 0, 30, 0],
    isGroup: true,
    xField: 'name',
    yField: 'count',
    yAxis: false,
    seriesField: 'year',
    label: {
      position: 'top',
      layout: [{ type: 'interval-hide-overlap' }, { type: 'adjust-color' }],
      offsetY: 10,
      style: {
        fontSize: 14,
        fontWeight: 'normal',
      },
    },
    grid: null,
    line: null,
    shapeStyle: {
      lineWidth: 10,
    },
    autoFit: true,
    maxColumnWidth: 20,
    legend: false,
  };

  const policyConfig = {
    data: policyCountData,
    ...commonCfg,
  };
  const workVolumeConfig = {
    data: workVolumeData,
    ...commonCfg,
  };
  const awardedCountConfig = {
    data: awardedCountData,
    ...commonCfg,
  };
  const rewardAmountConfig = {
    data: rewardAmountData,
    ...commonCfg,
  };

  return (
    <div className={styles.chartWrapper}>
      <Card
        bordered={false}
        title={
          <div className={styles.cardTitle}>
            <div className={styles.cardName}>政策兑现业务数据</div>
            <div className={styles.cardLegend}>
              <div className={styles.year}>
                <div className={classnames(styles.lengend, styles.thisYearLegend)}></div>
                <div className={styles.yearValue}>{moment().year()}年</div>
              </div>
              <div className={styles.year}>
                <div className={classnames(styles.lengend, styles.preYearLegend)}></div>
                <div className={styles.yearValue}>{moment().year() - 1}年</div>
              </div>
            </div>
          </div>
        }
        style={{
          height: '100%',
          borderRadius: 10,
        }}
      >
        <Column
          {...policyConfig}
          color={['#2B579E', '#2B839E']}
          style={{ backgroundColor: '#F2F4F9' }}
        />
        <Column
          {...workVolumeConfig}
          color={['#2B579E', '#2B839E']}
          style={{ backgroundColor: '#F2F4F9' }}
        />
        <Column
          {...awardedCountConfig}
          color={['#2B579E', '#2B839E']}
          style={{ backgroundColor: '#F2F4F9' }}
        />
        <Column
          {...rewardAmountConfig}
          color={['#2B579E', '#2B839E']}
          style={{ backgroundColor: '#F2F4F9' }}
        />
      </Card>
    </div>
  );
};

export default DataHistogramChart;
